<!DOCTYPE html>
<html lang="en">
    <head>
        <title>linux-dash : Server Monitoring Web Dashboard</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="description" content="Monitor your Linux server through a simple web dashboard. Open source and free!">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
        <link rel="icon" href="img/favicon.ico" type="image/x-icon">
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
        <link href="css/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <link href="css/style.css" rel="stylesheet" type="text/css">
        <link href="css/pages/dashboard.css" rel="stylesheet" type="text/css">
        <link href="css/odometer.css" rel="stylesheet" type="text/css">
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" href="./">Falcon-Agent</a>
                    <div class="nav-collapse">
        		        <ul class="nav pull-right">
                            <li>
                                <a target="_blank" href="https://github.com/open-falcon/agent">
                                    <i class="lead icon-github-sign"></i> 
            				        <span class="lead">Contribute on GitHub</span>
            			        </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="subnavbar">
            <div class="subnavbar-inner">

 	        <a class="btn btn-navbar btn-info visible-phone" data-toggle="collapse" data-target=".nav-collapse">
        	    <span class="icon-bar"></span>
        	    <span class="icon-bar"></span>
        	    <span class="icon-bar"></span>
      		</a>

                <div class="container nav-collapse">

                    <ul class="mainnav">
                        <li>
                            <a class="js-smoothscroll" href="#refresh-os"><i class="icon-info-sign"></i><span>General</span></a>
                        </li>
                        <li>
                            <a class="js-smoothscroll" href="#refresh-load"><i class="icon-laptop"></i><span>Loadavg</span></a>
                        </li>
                        <li>
                            <a class="js-smoothscroll" href="#refresh-ram"><i class="icon-dashboard"></i><span>Ram</span></a>
                        </li>
                        <li>
                            <a class="js-smoothscroll" href="#refresh-df"><i class="icon-list-alt"></i><span>Disk</span></a>
                        </li>
                         <li>
                            <a class="js-smoothscroll" href="#refresh-diskstats"><i class="icon-exchange"></i><span>DiskIO</span></a>
                        </li>
                        <li>
                            <a class="js-smoothscroll" href="#refresh-cpu"><i class="icon-list-alt"></i><span>Cpu</span></a>
                        </li>
                    </ul>

                </div><!-- /container -->
            </div><!-- /subnavbar-inner -->
        </div><!-- /subnavbar -->
        <div class="main">
            <div class="main-inner">
                <div class="container">
                    <div class="lead" style="text-align: center;">
                        <div class="btn icon-refresh js-refresh-info" data-title="Refresh all widgets!" data-toggle="tooltip" id="refresh-all"></div>
                        <div>
                            A simple web dashboard to monitor your server.
                        </div>
                    </div>
                    <div id="widgets" class="">

                    <div class="row">
                        <div class="span3">
                            <div id="general-info-widget" class="widget widget-table action-table">
                                <div class="widget-header">
                                    <i class="icon-info-sign"></i>
                                    <h3>
                                        General Info
                                    </h3>
                                    <div id="refresh-os" class="btn icon-refresh js-refresh-info"></div>
                                </div><!-- /widget-header -->
                                <div class="widget-content">
                                    <div class="general-info-item">
                                        <span class="general-title">Kernel Version</span>
                                        <span class="general-data" id="os-info"></span>
                                    </div>
                                    <div class="general-info-item">
                                        <span class="general-title">Uptime</span>
                                        <span id="os-uptime"></span>
                                    </div>
                                    <div class="general-info-item">
                                        <span class="general-title">Server Time</span>
                                        <span id="os-time"></span>
                                    </div>
                                    <div class="general-info-item">
                                        <span class="general-title">Hostname</span>
                                        <span id="os-hostname"></span>
                                    </div>
                                    <div class="general-info-item">
                                        <span class="general-title">Agent Version</span>
                                        <span id="agent-version"></span>
                                    </div>
                                </div>
                            </div><!-- /widget -->
                        </div>

                        <div class="span4">
                            <div id="load-average-widget" class="widget">
                                <div class="widget-header">
                                    <i class="icon-laptop"></i>
                                    <h3>
                                        Load average
                                    </h3>
                                    <div id="refresh-load" class="btn icon-refresh js-refresh-info"></div>
                                </div><!-- /widget-header -->
                                <div class="widget-content">
                                    <div style="text-align:center;">
                                        <b>Number of cores:</b> <span class="lead" id="core-number">0</span>
                                    </div>
                                    <div class="cf big_stats">
                                        <div class="stat">
                                            <i class="icon-#">1 min&nbsp;</i> <span class="value odometer" id="cpu-1min-per"></span> %<br>
                                            <span class="value" id="cpu-1min"></span>
                                        </div><!-- .stat -->
                                        <div class="stat">
                                            <i class="icon-#">5 min&nbsp;</i> <span class="value odometer" id="cpu-5min-per"></span> %<br>
                                            <span class="value" id="cpu-5min"></span>
                                        </div><!-- .stat -->
                                        <div class="stat">
                                            <i class="icon-#">15 min&nbsp;</i> <span class="value odometer" id="cpu-15min-per"></span> %<br>
                                            <span class="value" id="cpu-15min"></span>
                                        </div><!-- .stat -->
                                    </div>
                                </div><!-- /widget-content -->
                            </div><!-- /widget -->
                        </div>

                        <div class="span5">
                            <div id="ram-widget" class="widget widget-nopad">
                                <div class="widget-header">
                                    <i class="icon-list-alt"></i>
                                    <h3>
                                        RAM
                                    </h3>
                                    <div id="refresh-ram" class="btn icon-refresh js-refresh-info"></div>
                                </div><!-- /widget-header -->
                                <div class="widget-content">
                                    <div class="big-stats-container">
                                        <div class="widget-content">
                                            <div class="cf big_stats">
                                                <div class="stat">
                                                    <i class="icon-#">Total&nbsp;</i> <span class="value odometer" id="ram-total"></span> MB
                                                </div><!-- .stat -->
                                                <div class="stat">
                                                    <i class="icon-#">Used&nbsp;</i> <span class="value odometer" id="ram-used"></span> MB<br>
                                                    <span class="value odometer" id="ram-used-per"></span> %
                                                </div><!-- .stat -->
                                                <div class="stat">
                                                    <i class="icon-#">Free&nbsp;</i> <span class="value odometer" id="ram-free"></span> MB<br>
                                                    <span class="value odometer" id="ram-free-per"></span> %
                                                </div><!-- .stat -->
                                            </div>
                                        </div><!-- /widget-content -->
                                    </div>
                                </div>
                            </div>
                        </div>
                      </div><!-- ./row -->

                        <div class="row">			
                            <div class="span12">
                                <div id="disk-usage-widget" class="widget widget-table">
                                    <div class="widget-header">
                                        <i class="icon-list"></i>
                                        <h3>
                                            Disk Usage
                                        </h3>
                                        <div id="refresh-df" class="btn icon-refresh js-refresh-info"></div>
                                    </div><!-- /widget-header -->
                                    <div class="widget-content">
                                        <table id="df_dashboard" class="table table-hover table-condensed table-bordered"></table>
                                    </div><!-- /widget-content -->
                                </div><!-- /widget -->
                            </div>
                        </div><!--./row -->

                        <!-- diskstats -->
                        <div class="row">          
                            <div class="span12">
                                <div id="diskstats-widget" class="widget widget-table">
                                    <div class="widget-header">
                                        <i class="icon-exchange"></i>
                                        <h3>
                                            Disk IO Stats
                                        </h3>
                                        <div id="refresh-diskstats" class="btn icon-refresh js-refresh-info"></div>
                                    </div><!-- /widget-header -->
                                    <div class="widget-content">
                                        <table id="diskstats_dashboard" class="table table-hover table-condensed table-bordered"></table>
                                    </div><!-- /widget-content -->
                                </div><!-- /widget -->
                            </div>
                        </div><!--./row -->

                        <div class="row">          
                            <div class="span12">
                                <div id="cpu-widget" class="widget widget-table">
                                    <div class="widget-header">
                                        <i class="icon-list"></i>
                                        <h3>
                                            CPU
                                        </h3>
                                        <div id="refresh-cpu" class="btn icon-refresh js-refresh-info"></div>
                                    </div><!-- /widget-header -->
                                    <div class="widget-content">
                                        <table id="cpu_dashboard" class="table table-hover table-condensed table-bordered"></table>
                                    </div><!-- /widget-content -->
                                </div><!-- /widget -->
                            </div>
                        </div><!--./row -->

                    </div><!-- #/widgets -->


                    <div class="clear"></div>
                    <footer>
                        <div class="site-source">
                            <a href="/">Falcon-Agent</a> is open source on <a href="https://github.com/open-falcon/agent" target="_blank">GitHub</a>.<br />
                            Patches, suggestions, and comments are welcome.
                        </div>
                        <div class="sfc-member">
                            Powered by <a href="http://ulricqin.com">UlricQin</a>
                        </div>
                    </footer>


                </div>
            </div><!-- /main-inner -->
        </div><!-- /main -->

      

        <!-- Javascript-->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/jquery-ui.min.js" type="text/javascript"></script>
        <script src="js/bootstrap.js" type="text/javascript"></script>
        <script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
        <script src="js/odometer.js" type="text/javascript"></script>
        <script src="js/dashboard.js" type="text/javascript"></script>
        <script src="js/base.js" type="text/javascript"></script>
    </body>
</html>

